import { useState } from "react";
import { data1 } from "../data/data1.tsx";

const SculptureList = () => {
	const [index, setIndex] = useState(0);
	const [showMore, setShowMore] = useState(false);
	const hasNext = index < data1.length - 1;
	const handleNextClick = () => {
		if (hasNext) {
			setIndex(index + 1);
		} else {
			setIndex(0);
		}
	};

	const handleMoreClick = () => {
		setShowMore(!showMore);
	};

	let sculpture = data1[index];
	return (
		<>
			<button onClick={handleNextClick}>Next</button>
			<h2>
				<i>{sculpture.name} </i>
				by {sculpture.artist}
			</h2>
			<h3>({index + 1} of {data1.length})
			</h3>
			<button onClick={handleMoreClick}>
				{showMore ? "Hide" : "Show"} details
			</button>
			{showMore && <p>{sculpture.description}</p>}
		</>
	)
};
export default SculptureList;